<template>
    <div class="today-warning">
        <div class="head">{{this.dataInfo.length}}家</div>
        <template v-if="Array.isArray(dataInfo) && dataInfo.length>3">
            <Swiper class="today-warning-container swiper" :options="swiperOptions" ref="swiper" @mouseenter.native="stopAutoplay" @mouseleave.native="startAutoplay">
                <swiper-slide class="swiper-slide" v-for="(item, index) in dataInfo" :key="index">
                    <div class="row">
                        <div class="row-inner">
                            <div :title="item.hospitalName" class="hospital-name">{{ item.hospitalName }}</div>
                            <div :title="item.warningName" class="warning-name">{{ item.warningName }}</div>
                            <div :title="item.department" class="department">{{ item.department }}</div>
                            <div :title="item.monitor" class="monitor">{{ item.monitor }}</div>
                            <div :title="'预警时间:'+item.time" class="time">{{ item.time }}</div>
                            <div :title="item.handleState" class="handle-state">{{ item.handleState }}</div>
                            <div :title="item.handlePerson" class="handle-person">{{ item.handlePerson }}</div>
                            <div :title="'处置时间:'+item.handleTime" class="handle-time">{{ item.handleTime }}</div>
                        </div>
                    </div>
                </swiper-slide>
            </Swiper>
        </template>
        <template v-else-if="Array.isArray(dataInfo) && dataInfo.length<=3">
          <div class="row" v-for="(item, index) in dataInfo" :key="index">
            <div class="row-inner">
                <div :title="item.hospitalName" class="hospital-name">{{ item.hospitalName }}</div>
                <div :title="item.warningName" class="warning-name">{{ item.warningName }}</div>
                <div :title="item.department" class="department">{{ item.department }}</div>
                <div :title="item.monitor" class="monitor">{{ item.monitor }}</div>
                <div :title="'预警时间:'+item.time" class="time">{{ item.time }}</div>
                <div :title="item.handleState" class="handle-state">{{ item.handleState }}</div>
                <div :title="item.handlePerson" class="handle-person">{{ item.handlePerson }}</div>
                <div :title="'处置时间:'+item.handleTime" class="handle-time">{{ item.handleTime }}</div>
            </div>
          </div>
        </template>
        <div v-else class="empty">暂无数据</div>
    </div>
</template>
<script>
import {toDayWarn,analysisResult, hospitalNationList,warnList, getWarnType} from "@/api/his/screen";
export default {
    name: "TodayWarning",
    data() {
        return {
            swiperOptions: {
                loop: true,
                direction: 'vertical',
                speed: 1000, // 发生页面切换动画时，动画的切换速度
                autoplay: {
                    delay: 2000, // 幻灯片停留时间
                    disableOnInteraction: true, // 用户操作swiper之后，是否禁止autoplay
                },
                slidesPerView: 3
            },
            dataInfo: [

            ],
        };
    },
    created() {
    	  this.toDay();
    },
    methods: {
    	toDay() {
    		//今日预警机构
		  var that = this
    	  toDayWarn().then(response => {
    		  if(response.code ==200){
    			   var list = response.data
				   var rlist = []
				   for (let i = 0; i < list.length; i++) {
				     var item = list[i]
					 var map = {}
					 map.hospitalName = item.hospitalName
					 if(item.hospitalName==""){
					 	map.hospitalName = '医院名称无'
					 }
					 map.warningName = item.warningName
					if(item.warningName==""){
						map.warningName = '预警名称无'
					}
					 map.department = item.departmentName
					 map.monitor = item.monitor+'路监控'
					 map.time = item.warn_time
					 map.handleState = item.handleState
					 if(item.handleState==0){
						 map.handleState = '未处置'
					 }else if(item.handleState==1){
						 map.handleState = '处置中'
					 }else if(item.handleState==2){
						  map.handleState = '处置完成'
					 }else{
						 map.handleState = '未处置'
					 }
					 map.handlePerson = item.handlePerson
					 if(item.handlePerson==""){
						 map.handlePerson = '处置人无'
					 }
					 map.handleTime = item.handleTime
					 if(item.handleTime==""){
						 map.handleTime = '处置时间无'
					 }
					 this.dataInfo.push(map)
				   }
				   // alert(this.dataInfo.length)
    		  }
    	  });
    	},
      stopAutoplay(){
        this.$refs.swiper.swiperInstance.autoplay.stop()
      },
      startAutoplay(){
        this.$refs.swiper.swiperInstance.autoplay.start()
      },
    },
    mounted() {
    },
    beforeDestroyed(){
    }
};
</script>
<style lang="scss" scoped>
.today-warning {
    overflow: hidden;
    flex-shrink: 0;

    .head {
        width: 418px;
        height: 28px;
        background-image: url("~@/assets/images/home/today-warning.png");
        margin-bottom: 29px;
        background-repeat: no-repeat;
		font-size: 14px;
		font-weight: bold;
    }
    .today-warning-container {
        height: 127px;
        overflow: hidden;
    }
    .row {
        overflow: hidden;
        // background-color: red;
        margin-top: -5px;
    }
    .row-inner {
        transition: all 0.3s ease-in;
        background-color: #fff;
        height: 39px;
        display: flex;
        align-items: center;
        line-height: 39px;
        padding: 0 20px;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 5px;

        .hospital-name {
            width: 126px;
            font-weight: 500;
            font-size: 16px;
            color: #434343;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .warning-name {
            width: 187px;
            font-weight: 500;
            font-size: 16px;
            color: #4373F1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .department,
        .monitor,
        .time,
        .handle-state,
        .handle-person,
        .handle-time {
            font-weight: 500;
            font-size: 16px;
            color: #434343;
            margin-right: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .handle-time {
            margin-right: 0;
        }
    }
}
.empty {
    width: 957px;
    height: 124px;
    background: #ffffff8a;
    border-radius: 5px;
    background-image: url("~@/assets/images/common/empty.png");
    background-repeat: no-repeat;
    background-position: center 22px;
    font-weight: 500;
    font-size: 16px;
    color: #434343;
    text-align: center;
    padding-top: 87px;
    cursor: default;
}
</style>
